<template>
  <a-modal v-model:open="open" :title="modelTitle" centered :after-close="reset" :confirm-loading="confirmLoading" @ok="onOk">
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item name="repositoryName" label="仓库名称">
        <g-input v-model:value="formState.repositoryName" :search="false" placeholder="请输入仓库名称" :maxlength="200" />
      </a-form-item>
      <a-form-item name="repositoryAddress" label="镜像服务地址">
        <g-input
          v-model:value="formState.repositoryAddress"
          :search="false"
          addon-before="https://"
          placeholder="请输入镜像服务地址"
          class="dress-input"
        />
      </a-form-item>
      <div class="flex gap-24">
        <a-form-item name="username" label="用户名">
          <g-input v-model:value="formState.username" :search="false" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="password" label="密码">
          <a-input-password v-model:value="formState.password" v-trim placeholder="请输入密码" />
        </a-form-item>
      </div>
      <a-form-item name="description" label="描述">
        <a-textarea v-model:value="formState.description" v-trim placeholder="请输入描述" class="h-88" :maxlength="200" show-count />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { type FormInstance, message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { cloneDeep } from 'g6-fn'
  import { computed, ref } from 'vue'

  import { mirrorManageApi } from '@/services/api'
  import { validateBitLen, validateDirName } from '@/utils'

  export interface Props {
    afterCloseFn?: () => void
  }

  const props = withDefaults(defineProps<Props>(), {
    afterCloseFn: () => {}
  })

  interface FormState {
    id?: string
    repositoryName: string
    repositoryAddress: string
    username: string
    password: string
    description: string
  }

  const open = ref(false)
  const modelTitle = computed(() => `${formState.value.id ? '编辑' : '创建'}仓库`)
  const formRef = ref<FormInstance>()
  const formState = ref<FormState>({
    repositoryName: '',
    repositoryAddress: '',
    username: '',
    password: '',
    description: ''
  })

  const rules: Record<string, Rule[]> = {
    repositoryName: [
      { required: true, trigger: 'change', message: '请输入仓库名称' },
      { validator: validateDirName() },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    repositoryAddress: [{ required: true, trigger: 'change', message: '请输入镜像服务地址' }],
    username: [{ required: true, trigger: 'change', message: '请输入用户名' }],
    password: [{ required: true, trigger: 'change', message: '请输入密码' }]
  }
  const confirmLoading = ref(false)
  const onOk = async () => {
    await formRef.value?.validateFields()
    confirmLoading.value = true
    try {
      const handleApi = formState.value.id ? mirrorManageApi.editRepository : mirrorManageApi.addRepository
      let params = cloneDeep(formState.value)
      params.repositoryAddress = 'https://' + params.repositoryAddress
      await handleApi(params, { isAddUid: true })
      open.value = false
      message.success(`${formState.value.id ? '编辑' : '创建'}成功`)
      props.afterCloseFn()
      confirmLoading.value = false
    } catch (error) {
      confirmLoading.value = false
    }
  }

  const reset = () => {
    formRef.value?.resetFields()
    formState.value = {
      repositoryName: '',
      repositoryAddress: '',
      username: '',
      password: '',
      description: ''
    }
  }

  defineExpose({
    open: (form?: FormState) => {
      if (form) {
        let coloneForm = cloneDeep(form)
        coloneForm.repositoryAddress = coloneForm.repositoryAddress.split('https://')[1]
        Object.assign(formState.value, coloneForm)
      }
      open.value = true
    }
  })
</script>

<style lang="less" scoped>
  .dress-input {
    :deep(input) {
      border-radius: 0 6px 6px 0 !important;
    }
  }
</style>
